<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'shake_animation.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
<script type="text/javascript" src="<%=basePath%>/jquery-1.2.6.js"></script>
<script>
   ;$.fn.shake = function (intShakes /*Amount of shakes*/, intDistance /*Shake distance*/, intDuration /*Time duration*/,options) {
	   var defaults = {"position": "relative","init_left":"0"};
	    var options =  $.extend(defaults, options);  
        this.each(function () {
            var jqNode = $(this);
            jqNode.css(options);
            for (var x = 1; x <= intShakes; x++) {
                jqNode.animate({ left: Number(options.init_left)+(intDistance * -1) }, (((intDuration / intShakes) / 4)))
                .animate({ left: Number(options.init_left)+intDistance }, ((intDuration / intShakes) / 2))
                .animate({ left: Number(options.init_left) }, (((intDuration / intShakes) / 4)));
            }
        });
        return this;
};
$.fn.jump = function () {
        this.each(function () {
            var jqNode = $(this);
             jqNode.animate({"top":"-6px",},150).animate({"top":"-0px",},132)
				.animate({"top":"-5px",},130).animate({"top":"-0px",},120)
				.animate({"top":"-4px",},110).animate({"top":"-0px",},100)
				.animate({"top":"-3px",},90).animate({"top":"-0px",},80)
				.animate({"top":"-2px",},75).animate({"top":"-0px",},70);
        });
        return this;
};


	$(document).ready(function () {
	 $("#bt").jump();
	});
</script>
  </head>
  
  <body>
  http://127.0.0.1:81/MyDemos/shake_animation.jsp
    This is my JSP page. <br>
    <input type ="button" value="test" id ="bt"/>
  </body>
</html>
